<template>
    <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item :label="$t('upperComputer.menuButton.menu')" name="menuCode">
            <a-tree-select allow-clear v-model:value="menuCode" treeNodeFilterProp="title" show-search :tree-data="treeData"
                :field-names="{
                        children: 'childrens',
                        label: 'displayName',
                        key: 'id',
                        value: 'code',
                    }" />
        </a-form-item>
        <a-form-item :label="$t('upperComputer.menuButton.button')">
            <a-select v-model:value="buttonCodes" mode="multiple" optionFilterProp="label" show-search>
                <a-select-option v-for="item in buttons" :key="item.code" :value="item.code" :label="item.displayName">
                    {{ item.displayName }}&nbsp;
                    <menu-icon :iconName="item.icon" />
                </a-select-option>
            </a-select>
        </a-form-item>
    </a-form>
</template>

<script setup lang='ts'>
import i18n from '@/i18n';
import MenuIcon from '@/components/icon/index.vue';
import { MenuButtonDto } from '@/models/menu-button';
import { message, type TreeSelectProps } from 'ant-design-vue';
import type { BaseOptionType } from 'ant-design-vue/lib/select';
import { type Ref, ref, onMounted } from 'vue';
import { getMBMenusApi, postCopyButtonApi } from '@/services/menu-button';

const props = defineProps<{ id: number }>();
defineExpose({ ok });

const treeData: Ref<BaseOptionType | undefined> = ref<TreeSelectProps['treeData']>();
const menuCode: Ref<string> = ref<string>('');
const buttonCodes: Ref<Array<string>> = ref<Array<string>>(new Array<string>);
const buttons = [
    {
        code: 'Post',
        displayName: i18n.global.t('upperComputer.menuButton.add'), //新增
        icon: 'FileAddOutlined',
        sort: 1
    },
    {
        code: 'Put',
        displayName: i18n.global.t('upperComputer.menuButton.edit'), //编辑
        icon: 'EditOutlined',
        sort: 2
    },
    {
        code: 'Delete',
        displayName: i18n.global.t('upperComputer.menuButton.delete'), //删除
        icon: 'DeleteOutlined',
        sort: 3
    },
    {
        code: 'Tools',
        displayName: i18n.global.t('upperComputer.menuButton.tool'), //工具
        icon: 'SettingOutlined',
        sort: 4
    },
    {
        code: 'Refresh',
        displayName: i18n.global.t('upperComputer.menuButton.refresh'), //刷新
        icon: 'SyncOutlined',
        sort: 5
    }
];

onMounted(() => {
    getTreeData();
});

async function getTreeData(): Promise<void> {
    treeData.value = await getMBMenusApi();
}

async function ok(): Promise<boolean> {
    if (menuCode.value === '') {
        message.info(i18n.global.t('upperComputer.menuButton.required.selectMenu'));
        return false;
    }
    if (buttonCodes.value.length === 0) {
        message.info(i18n.global.t('upperComputer.menuButton.required.selectBotton'));
        return false;
    }
    const menuButtons: Array<MenuButtonDto> = new Array<MenuButtonDto>;
    for (let i: number = 0; i < buttons.length; ++i) {
        const button = buttons[i];
        for (let j: number = 0; j < buttonCodes.value.length; ++j) {
            if (button.code === buttonCodes.value[j]) {
                const menuButton: MenuButtonDto = new MenuButtonDto;
                menuButton.code = button.code;
                menuButton.displayName = button.displayName;
                menuButton.icon = button.icon;
                menuButton.sort = button.sort;
                menuButton.menuCode = menuCode.value;
                menuButtons.push(menuButton);
                break;
            }
        }
    }
    try {
        await postCopyButtonApi(menuButtons);
        message.success(i18n.global.t('upperComputer.menuButton.required.copySuccess'));
        return true;
    } catch {
        return false;
    }
}

</script>